<div style="padding: 5px;" class="back-plan  res-plan">
	<nz-table id="nzTable" #headerTable [nzShowPagination]="false" [nzData]="listOfData" 
		(nzCurrentPageDataChange)="currentPageDataChange($event)" [nzLoading]="firstLoading">
		<thead>
			<tr>
				<th *ngFor="let item of renderHeader" class="back-plans">
					<!-- <div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div> -->
					<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
				</th>
				<th class="back-plans"></th>
			</tr>
		</thead>
		<tbody id="body">
			<ng-container *ngFor="let data of headerTable.data; index as i">
				<tr *ngFor="let item of data.cmdList; index as j" (click)="showDetail(data)">
					<td>{{ data.ip_ID }}</td>
					<td>{{ item.cmdID }}</td>
					<td>
						<ng-container *ngIf="!item.isSingleEditing">
							{{ ('TrafficManagement.IncidentRecord.' + systemObj[item.sysID]) | translate }}
						</ng-container>
						<nz-select style="width: 120px;"  *ngIf="item.isSingleEditing" [(ngModel)]="item.sysID" (ngModelChange)="handleTypeChange($event, item)">
							<nz-option *ngFor="let option of systemList;" [nzValue]="option.value" [nzLabel]="('TrafficManagement.IncidentRecord.' + option.name) | translate"></nz-option>
						</nz-select>
					</td>
					<td>
						<ng-container *ngIf="item.sysID === '0'">
							<ng-container *ngIf="!item.isSingleEditing">{{item.deviceID}}</ng-container>
							<nz-select  style="width: 148px;" *ngIf="item.isSingleEditing" [(ngModel)]="item.deviceID" (ngModelChange)="handleDevChange($event, item)" [nzDropdownMatchSelectWidth]="false" [nzPlaceHolder]="'TrafficManagement.IncidentRecord.Device Id' | translate">
								<nz-option *ngFor="let option of deviceList" [nzValue]="option.eqtId" [nzLabel]="option.eqtId"></nz-option>
							</nz-select>
						</ng-container>
					</td>
					<td style="vertical-align: middle;">
						<ng-container *ngIf="item.sysID === '0'">
							<div style="display: flex;justify-content: flex-end;" *ngIf="item.isSingleEditing">
								<span class="iconfont icon-shezhi cur-p" (click)="handleSelect(item)"></span>
							</div>
							<itmp-plan-preview-img *ngIf="item.previewUrl" [previewUrls]="item.previewUrl"></itmp-plan-preview-img>
						</ng-container>
						<ng-container *ngIf="item.sysID !== '0'">
							<nz-select  style="width: 48%;" [nzDisabled]="!item.isSingleEditing"  [(ngModel)]="item._dispatchTarget" [nzDropdownMatchSelectWidth]="false">
								<nz-option *ngFor="let option of dispatchOptions" [nzValue]="option.value"
									[nzLabel]="'TrafficManagement.IncidentRecord.'+option.name|translate"></nz-option>
							</nz-select>
							<nz-input-number style="width:48%" [nzDisabled]="!item.isSingleEditing" [(ngModel)]="item._dispatchNum" [nzMin]="1" [nzStep]="1"></nz-input-number>
						</ng-container>
					</td>
					<td>
						<nz-select [(ngModel)]="item.action" [nzDisabled]="!item.isSingleEditing">
							<nz-option *ngFor="let option of optionList" [nzValue]="option.value"
								[nzLabel]="'TrafficManagement.IncidentRecord.'+option.label|translate"></nz-option>
						</nz-select>
					</td>
					<td>{{ ('TrafficManagement.IncidentRecord.' + executeStatusList[item.executeStatus]) | translate }}</td>
					<td>
						<span *ngIf="!isEditing" (click)="editItem(item,i,j)">
							<i class="iconfont icon-pen01"></i>
						</span>
						<span *ngIf="!isEditing" (click)="deleteItem(item,i,j)">
							<i class="iconfont icon-delete"></i>
						</span>
					</td>
				</tr>
			</ng-container>
		</tbody>
	</nz-table>

	<div style="padding: 10px;">
	
		<div nz-row nzGutter="16">
			<div class="buttonSet" nz-row>
				<div  class='res-btn' *ngIf='isEditing'> <button nz-button nzType="default" nzBlock
						type="button" (click)="cancelEdit()">{{'TrafficManagement.IncidentRecord.Cancel' | translate}}</button></div>
				<div  class='res-btn' *ngIf='isEditing'> <button nz-button nzType="primary" nzBlock
						type="button" (click)="saveEditItem()" [nzLoading]="isLoadingOne">{{'TrafficManagement.IncidentRecord.Save' | translate}}</button></div>
				<div  class='res-btn' *ngIf="accessButton?accessButton['Add Task']:false"> <button nz-button
						nzType="primary" type="button" nzBlock [disabled]="isEditing || firstLoading"
						(click)="addTask()">{{'TrafficManagement.IncidentRecord.Add_Task' | translate}}</button></div>
				<div  class='res-btn' *ngIf="accessButton?.Execute">
					<itmp-toolbar [toolbarList]="toolbarList" eventType="response-plan" [selectData]="seleceData"
						exportName="ResponsePlan" [deviceList]="deviceList">
					</itmp-toolbar>
				</div>
				<div  class='res-btn' *ngIf="accessButton?.Execute"> <button nz-button nzType="primary"
						nzBlock [disabled]="isEditing || isExecute || firstLoading"
						(click)="execute()">{{'TrafficManagement.IncidentRecord.Execute' | translate}}</button></div>
			</div>
		</div>
	</div>
</div>

<div style="position: fixed;right:-1000px;top: -1000px;" *ngIf="firstDisplayMessage">
	<itmp-plan-msg-info [initDisplayMessage]="firstDisplayMessage._displayMessage"></itmp-plan-msg-info>
</div>
<!--
<ng-template #contentTemplate>
    <ul class="headerSelect">
        <li *ngFor="let item of renderHeader,let i=index">
            <input type="checkbox" [(checked)]="item.isChecked" (click)="renderHeadSelect(item,i)">
            {{item.name}}
        </li>
    </ul>
</ng-template>-->